/* ----------- Non-Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { } /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { } /* Portrait */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { } /* ----------- iPhone X ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { } /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { } /* ----------- iPad 1, 2, Mini and Air ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { } /* Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { } /* Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { } /* ----------- iPad 3, 4 and Pro 9.7" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { } /* Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPad Pro 10.5" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { } /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1112px) and (max-device-width: 1112px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPad Pro 12.9" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { } /* Landscape */ /* Declare the same value for min- and max-width to avoid colliding with desktops */ /* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { } /* ----------- Galaxy Tab 2 ----------- */ /* Portrait and Landscape */ @media (min-device-width: 800px) and (max-device-width: 1280px) { } /* Portrait */ @media (max-device-width: 800px) and (orientation: portrait) { } /* Landscape */ @media (max-device-width: 1280px) and (orientation: landscape) { } /* ----------- Galaxy Tab S ----------- */ /* Portrait and Landscape */ @media (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media (max-device-width: 800px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { } /* Landscape */ @media (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { }

webdevhub logo

  • Home
  • Navigation
    • Docs
    • Showcase
    • Contact!
  • Blog
    • Blog-Post-Archive
    • Top Blog Posts
    • ds-algo
    • platform docs
    • nodejs
    • Blog w Comments
  • Archive
    • Medium Articles
    • Resource-Archive-Server
    • Bootcamp Resources
    • OG-Blog
    • Gallery
    • Top Repos
    • WebResourceRepo
  • Audio
    • Projects
      • Potluck Planner
      • Meditation App
      • WebAudioLab
    • External Nav
      • Embeds Blog
      • alt-blogs
      • Games
      • Blog Backup
      • Cover Letter
      • Project Centric
      • Wordpress Blog
      • Project Portfolio Gallery
    • Tools
      • Github HTML Previewer
      • Text Tools
      • Ternary 2 If Else
      • Job Search Resources
      • Setup Checker
      • PotluckPlanner
      • WebDev Quizzes
      • Github-Advanced-Search
    • GitHub
    • Docs
    • About
      • Introduction to npm
      • Resume
      • About Me
      • Install
      • Javascript and Node
      • Intro To Node
      • Node vs Browser
      • Writing Files
      • Reading Files
    • Article Docs
      • lorem-ipsum
      • Apendix
      • Jamstack Api's
      • Python For JS Devs
      • Algorithms & Data Structures
      • Web Dev Review
      • Install
      • Node API's w Express
      • Intro To Node
      • Reading Files
      • Writing Files
      • Article-Compilation
    • Audio
      • Audio
    • WebDevDocs
      • Site README
    • FAQ
      • Contact!
    • Interactive Examples
      • Jupyter Notebooks
      • Clock
    • Medium
      • My Sites
      • social Links
      • Medium
    • Quick Reference
      • Installation
      • new-repo-git
      • Emmet Cheat Sheet
      • Useful Repos
    • React
      • Intro To React
      • npx-create-react-app
    • Tools
      • Tools Page 2:
      • Notes Template
      • Plug-ins
      • vscode

    Quick Reference

    • Installation
    • new-repo-git
    • Emmet Cheat Sheet
    • Useful Repos

    Jump to Section

    @bgoonz on almost every platformMediumBLM

    Twitter LinkedIn GitHub Youtube Instagram dev.to reddit
    Click to see detail of visits and stats for this site
    Loupe
     

    page counter "; ?>
    AddThis Sharing Sidebar
    Share to Facebook Facebook Share to Twitter Twitter Share to Print Print Share to Email Email Share to Pinterest Pinterest Share to Gmail Gmail Share to LinkedIn LinkedIn More AddThis Share options AddThis
    0
    Share
    Hide
    Show
    AddThis
    Black Lives Matter Badge  #BlackLivesMatter
    To be silent is to be complicit. Black lives matter.
    Send a donation →
    Add this to your website